import React, { Component } from 'react';
import { ListBox } from './style'
import { withRouter } from 'react-router-dom'

@withRouter
class List extends Component {
    render() {
        return (
            <ListBox>
                <h1>精品好菜</h1>
                <div>
                    {
                        this.props.data.length > 0
                            ?
                            this.props.data.map((item, index) => (
                                <dl key={"list" + index}>
                                    <dt onClick={() => {
                                        console.log(item.id);
                                        console.log(this.props.history);
                                    }}>
                                        <img src={item.img} alt="" />
                                    </dt>
                                    <dd>
                                        <h3>{item.name}</h3>
                                        <p>{item.all_click}浏览  {item.favorites}收藏</p>
                                    </dd>
                                </dl>
                            ))
                            :
                            <dl>
                                <dt>提示</dt>
                                <dd>数据玩命加载中...</dd>
                            </dl>
                    }

                </div>
            </ListBox>
        );
    }
}

export default List;
